<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="base.js" ></script>
    <script>
    	window.onload = function(){
    		
    		//产生雪花{雪花所在范围，飘落时间，图片路径，飘落方向}
    		//{id:box, times:30, urls:..., fx:+-1}
    		function Snow(option){
    			this.body = document.getElementById(option.id);
    			//时间间隔
    			this.time = option.times;
    			//图片路径
    			this.urls = option.url;
    			//飘落方向
    			this.fx = option.fx;
    			
    			//雪花初始值
    			this.init = function(){
    				//产生雪花
    				this.snow = document.createElement("img");
    				this.snow.className = "snow";
    				this.snow.src = this.urls;
    				//大小
    				this.snow.style.width = this.snow.style.height = randomInt(15,30) + "px";
    				//初始位置
    				if(this.fx > 0){
    					this.snow.style.left = randomInt(0,400) + "px";
    				}else{
    					this.snow.style.left = this.body.offsetWidth - randomInt(0,400) + "px";
    				}
    				//速度
    				this.speedx = this.fx * randomInt(5,15);
    				this.speedy = randomInt(5,10);
    				this.body.appendChild(this.snow);
    			}
    			//雪花飘落
    			this.loop = function(){
    				this.timer = setInterval(function(){   					
    					this.snow.style.left = this.snow.offsetLeft + this.speedx + "px";
    					this.snow.style.top = this.snow.offsetTop + this.speedy + "px";
    					if(this.snow.offsetLeft < 0 || this.snow.offsetLeft > this.body.offsetWidth){
    						this.distroy();
    					}
    					if(this.snow.offsetTop > this.body.offsetHeight){
    						this.distroy();
    					}
    				}.bind(this),this.time);
    			}
    			this.distroy = function(){
    				this.snow.remove();
    			}
    		}

			function Snows(option){
				this.loop = function(){
					this.timer = setInterval(function(){
						var snow = new Snow(option);
			    		snow.init();
			    		snow.loop();
					},20)
				}
			}
	    		
    		new Snows({
				        id: "box",
				        times: 20,
				        url: "img/snow.png",
				        fx: -1
				    	}).loop();
    	};
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .snow{
        	display: block;
        	position: absolute;
        }
        
        #box {
            width: 1000px;
            height: 600px;
            background: #000000;
            border: 5px solid red;
            margin: 20px auto;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<!--<script>
    var s = new snow({
        id: 'box',
        times: 30,
        url: 'img/snow.png',
        fx: -1
    });
    s.loop()
</script>-->

</html>